<template>
  <view class="map-container">
	  <status-bar></status-bar>
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
      <view class="nav-back" @click="goBack">
        <text class="iconfont icon-back">&lt;</text>
      </view>
      <view class="nav-title">选择位置</view>
    </view>

    <!-- 高德地图组件 -->
    <view class="amap-container">
      <amap 
        @commitCheck="commitCheck" 
        :mapKey='mapKey'
        :Radius='Radius'
        :listIco='listIco'
        :orientationIco='orientationIco'
        :resettingIco='resettingIco'
      ></amap>
    </view>
  </view>
</template>

<script>
// 导入高德地图组件
import amap from 'components/amap-map'

export default {
  components: {
    amap
  },
  data() {
    return {
      mapKey: '45d97d425c3fd8cbe3134d920f9db32e', // 高德地图key
      Radius: '100', // 搜索半径
      listIco: '', // 列表图标
      orientationIco: '', // 定位图标
      resettingIco: '' // 重置图标
    }
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    // 地图选择确认回调
    commitCheck(location) {
      // 将选择的位置信息传回上一页
      const pages = getCurrentPages();
      const prevPage = pages[pages.length - 2];
      if (prevPage) {
        // 调用上一页的方法，传递位置信息
        prevPage.$vm.setLocationInfo && prevPage.$vm.setLocationInfo(location);
      }
      
      uni.navigateBack();
    }
  }
}
</script>

<style lang="scss" scoped>
.map-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: relative;
}

/* 顶部导航栏 */
.nav-bar {
  display: flex;
  align-items: center;
  height: 90rpx;
  background-color: #0088ff;
  color: #fff;
  padding: 0 30rpx;
  position: relative;
  z-index: 10;
}

.nav-back {
  font-size: 40rpx;
  width: 60rpx;
}

.nav-title {
  flex: 1;
  text-align: center;
  font-size: 36rpx;
}

/* 高德地图容器 */
.amap-container {
  flex: 1;
  height: 700rpx;
  width: 100%;
  position: relative;
}
</style>
